$(function(){
    $("li .intro a").click(function(){
        var $chosed = $(".chosed .intro");
        var li_index = $(this).closest("li").index();
        var txt = $(this).text()+"<em>×</em>";
        $(this).siblings().removeClass("selected").css("color","rgba(0, 0, 0, 0.5)").end().addClass("selected").css("color","#fff");
        //把每个li里面的a插入到对应的span里面，这样同时解决了两个问题：修改选项同步，每个li只能有一个span
        $chosed.find("span").eq(li_index).html(txt).css({"display":"inline-block",'margin-bottom':'10px'});
        // 关闭span
        $(".chosed .intro em").click(function(){
            var index = $(this).parent("span").index();
            $("li:not('.chosed')").eq(index).find(".intro a").removeClass("selected").css("color","rgba(0, 0, 0, 0.5)");
            $(this).parent("span").empty().css("display","none");
        });
    });
});
